```svelte
<script lang="ts">
  import * as progress from "@zag-js/progress"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const service = useMachine(progress.machine, {
    id: "1",
  })

  const api = $derived(progress.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getLabelProps()}>Upload progress</div>
  <svg {...api.getCircleProps()}>
    <circle {...api.getCircleTrackProps()} />
    <circle {...api.getCircleRangeProps()} />
  </svg>
</div>
```
